<template>
<div class="demo demo1">
  <vue-seamless-scroll :class-option="classOption" :data="list" @onChange="onChange"
                       @SingScrollEnd="SingScrollEnd">
    <p v-for="(item,index) in list" :key="index" :data-item="item+index">
      {{item+index}}
    </p>
  </vue-seamless-scroll>
</div>
<!--<div class="demo demo2">
  <vue-seamless-scroll :class-option="classOption2" :data="list">
    <p v-for="(item,index) in list" :key="index">
      <span>{{item}}</span>
    </p>
  </vue-seamless-scroll>
</div>-->
</template>

<script>
// 已经全局安装过vue-seamless-scroll
import {ref, reactive} from "vue";
export default {
  name: "demo",
  setup() {
    const list = ref([])
    // 当前的滚动的index
    const index = ref(0)
    for (let i = 0; i < 20; i++) {
      list.value.push('人生有很多出其不意的惊喜，比如你会以为我举个栗子')
      // list.value.push('人生有')
    }
    const classOption = reactive(
        {
          singleHeight: 21+20, // 元素高度+下边距
          stop: false, // 是否停止滚动
          autoPlay: false, // 不自动滚动
          waitTime: 1000 // 停顿时间
        }
    )
    const classOption2 = {
      step: 0.5, // 速度
      hoverStop: true, // 鼠标停止
      direction: 1, // 0 下 1 上 2 左 3 右
    }
    function onChange(e) {
      console.log(e)
    }
    // 单次滚动结束 获取当前的index e是当前已经滚动的距离
    function SingScrollEnd(e){
      // console.log(e);
      let len = list.value.length
      index.value = (index.value + 1) % len
      console.log(index.value)
    }
    // 1秒后开始滚动 因为组件第一次滚动回调不会触发
    setTimeout(() => {
      classOption.autoPlay = true
      index.value++
    }, classOption.waitTime)
    return {
      classOption,
      classOption2,
      list,
      onChange,
      SingScrollEnd,
    }
  }
}
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
}
.demo{
  width: 500px;
  height: 300px;
  overflow: hidden;
  border: 1px solid darkturquoise;
  p{
    margin-bottom: 20px;
  }
}
.demo2{
  margin-top: 50px;
}
</style>
